<template>
  <div class="v-actual-project-milestone-create">
    <div class="v-actual-project-milestone-create-container">
      <div class="row g-pd-10">
        <div class="label">{{ $t("实际项目里程碑名称") + ":" }}</div>
        <div class="content g-fd-c g-ai-c">
          <el-input
            v-model="name"
            @input="val => stepValueChange(val, ['name'])"
          ></el-input>
        </div>
      </div>
      <div class="row g-pd-10">
        <div class="label">{{ $t("选择实际项目里程碑类型") + ":" }}</div>
        <div class="content">
          <el-dropdown
            ref="typeDropdown"
            class="dropdown model-dropdown"
            :popper-options="popperOptions"
            trigger="click"
            placement="bottom-start"
          >
            <div class="dropdown-content">
              <img
                v-if="type.icon"
                :src="type.icon"
                alt=""
                class="g-m-r-4"
              />
              <span class="text g-one-line g-flex-1">{{ type.label }}</span>
              <img
                src="statics/icons/app/iconlist2.png"
                alt=""
                class="_btn"
              />
            </div>
            <template #dropdown>
              <ModelDropdown
                :list="typeList"
                @changeOption="typeChange"
              ></ModelDropdown>
            </template>
          </el-dropdown>
        </div>
      </div>
      <DateAndTimeSetting
        :projectId="projectId"
        :defaultDate="defaultDate"
        :warningMsr="warningMsr"
        @stepValueChange="stepValueChange"
      ></DateAndTimeSetting>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, onBeforeMount } from "vue";
import { modelService } from "@/mdesign-lib/mdesign-app.umd.js";
import DateAndTimeSetting from "../../dateAndTimeSettingWindow/DateAndTimeSetting.vue";
import ModelDropdown from "@/modules/model/modals/relationCriteria/components/ModelDropdown/index.vue";

interface SelectOption {
  label: string;
  value: string;
  icon?: string;
}

const props = defineProps<{
  projectId: string;
  defaultDate?: string;
  stereotype: string;
  defaultName: string;
  warningMsr: string;
}>();

const name = ref("");
const typeList = ref<SelectOption[]>([
  {
    label: "服务中",
    value: "UAF::Projects::Taxonomy::ActualMilestoneKind::InService",
    icon: "statics/arch/icon/ActualMilestoneKindInService.svg"
  },
  {
    label: "已部署",
    value: "UAF::Projects::Taxonomy::ActualMilestoneKind::Deployed",
    icon: "statics/arch/icon/ActualMilestoneKindDeployed.svg"
  },
  {
    label: "不再可用",
    value: "UAF::Projects::Taxonomy::ActualMilestoneKind::NoLongerUsed",
    icon: "statics/arch/icon/ActualMilestoneKindNoLongerUsed.svg"
  },
  {
    label: "停用",
    value: "UAF::Projects::Taxonomy::ActualMilestoneKind::OutOfService",
    icon: "statics/arch/icon/ActualMilestoneKindOutOfService.svg"
  },
  {
    label: "其他",
    value: "UAF::Projects::Taxonomy::ActualMilestoneKind::Other",
    icon: "statics/arch/icon/ActualMilestoneKindOther.svg"
  }
]);

const type = ref<SelectOption>(typeList.value.find(item => item.value === props.stereotype) as SelectOption);

const typeDropdown = ref();

const popperOptions = computed(() => {
  return {
    modifiers: [
      {
        name: "applyStyles",
        effect: ({ state }) => {
          state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
          state.elements.popper.style.maxHeight = "220px";
          state.elements.popper.style.overflow = "auto";
        }
      }
    ]
  };
});
onBeforeMount(() => {
  stepValueChange(props.stereotype, ["type"]);
  getElementNewName();
});

const getElementNewName = async () => {
  const tableName = await modelService.getElementNewName(props.projectId, props.stereotype, props.defaultName);
  name.value = tableName;
  stepValueChange(tableName, ["name"]);
};

const typeChange = (val: SelectOption) => {
  type.value = val;
  stepValueChange(val.value, ["type"]);
  typeDropdown.value.handleClose();
};

const emit = defineEmits<{
  (e: "stepValueChange", value: any, path: string[]): void;
}>();

const stepValueChange = (val: any, path: string[] = []) => {
  emit("stepValueChange", val, path);
};
</script>
<style lang="scss">
.v-actual-project-milestone-create {
  min-height: 100%;
  border: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .v-actual-project-milestone-create-container {
    .el-dropdown {
      width: 100%;
      overflow: hidden;
      .el-tooltip__trigger {
        flex: 1;
        overflow: hidden;
      }
    }
    > .row {
      padding-bottom: 6px;
      .label {
        line-height: 16px;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 8px;
      }
      .content {
        .el-input .el-input__wrapper {
          box-shadow: 0 0 0 1px #d9d9d9 inset !important;
          padding-left: 8px;
          padding-right: 10px;
          height: 26px;
          .el-input__inner {
            height: 24px;
          }
        }
        .model-dropdown {
          .dropdown-content {
            display: flex;
            align-items: center;
            height: 26px;
            border: 1px solid rgba(0, 0, 0, 0.15);
            padding-right: 6px;
            padding-left: 8px;
            span {
              display: inline-block;
              font-size: 12px;
              margin-right: 4px;
            }
            ._btn {
              cursor: pointer;
            }
            .el-input__wrapper {
              padding-left: 0 !important;
            }
          }
        }
      }
    }
    .v-data-and-time-setting {
      height: 480px;
      border: 0;
    }
  }
}
</style>
